<!--
 * @Author: your name
 * @Date: 2021-02-20 15:26:57
 * @LastEditTime: 2021-02-20 18:05:29
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hm63-hmtt-wsh\src\views\login\login.vue
-->
<template>
  <div class="login">
    <navBar path="/home"></navBar>
    <div class="content">
      <van-form ref="form">
        <van-field
          class="field"
          v-model="form.mobile"
          name="mobile"
          placeholder="请输入手机号"
          maxlength="11"
          :rules="rules.mobile"
        >
          <template #left-icon>
            <van-icon class="left-icon" name="contact" color="#3296fa" />
          </template>
        </van-field>
        <van-field
          class="field"
          v-model="form.code"
          name="code"
          placeholder="请输入验证码"
          :rules="rules.code"
        >
          <template #left-icon>
            <van-icon class="left-icon" name="bag-o" color="#3296fa" />
          </template>
          <template #button>
            <div class="code" @click="getCode" v-if="totalTime === 60">
              获取验证码
            </div>
            <div class="code" v-else>{{ totalTime }}S后重试</div>
          </template>
        </van-field>
        <div style="margin: 16px;">
          <van-button round block type="info" @click="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { authorizations } from '../../api/login'
import { user } from '../../api/my'
import { setLocal } from '../../utils/local'
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      form: {
        mobile: '13999999999', // 手机号
        code: '' // 验证码
      },
      totalTime: 60, // 倒计时
      rules: {
        mobile: [
          { required: true, message: '请填写手机号' },
          {
            validator: value => {
              return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(
                value
              )
            },
            message: '请输入正确的手机号'
          }
        ],
        code: [{ required: true, message: '请填写验证码' }]
      }
    }
  },

  methods: {
    ...mapMutations(['setIsLogin', 'setUserInfo']),
    // 获取验证码
    getCode () {
      this.$refs.form.validate('mobile').then(() => {
        this.$toast.loading('加载中')
        this.totalTime--
        const _interval = setInterval(() => {
          this.totalTime--
          if (this.totalTime === 0) {
            clearInterval(_interval)
            this.totalTime = 60
          }
        }, 1000)
        this.form.code = 246810
        this.$toast.clear()
      })
    },

    // 登录
    submit () {
      this.$refs.form
        .validate()
        .then(() => {
          this.$toast.loading('加载中')
          authorizations(this.form)
            .then(res => {
              // 保存token
              setLocal('token', res.data.token)
              setLocal('refresh_token', res.data.refresh_token)
              this.setIsLogin(true)
              // 保存用户信息
              user().then(res => {
                this.setUserInfo(res.data)
              })
              this.$toast.clear()

              // 路由跳转
              const _redirect = this.$route.query.redirect
              if (_redirect) {
                this.$router.push(_redirect)
              } else {
                this.$router.push('/home')
              }
            })
            .catch(err => {
              console.log('验证码错误打印', err)
            })
        })
        .catch(() => {
          this.$toast.fail('验证失败')
        })
    }
  }
}
</script>

<style lang="less">
.login {
  .content {
    margin: 200px 40px;
    .left-icon {
      padding: 0 10px;
    }
  }
}</style
>>
